<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>首页</title>
    <link
      rel="stylesheet"
      href="/node_modules/bootstrap/dist/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="/node_modules/swiper/swiper-bundle.min.css" />

    <link rel="stylesheet" href="/static/styles/page.css" />
    <link rel="stylesheet" href="/static/styles/style.css" />
  </head>

  <body>
    <div class="page__header">
      <div class="container page__header__wrapper">
        <a href="" class="logo">
          <img src="/static/images/logo.png" alt="logo" />
        </a>
        <ul class="navigation">
          <li class="active"><a href="">首页</a></li>
          <li><a href="">校区事业部</a></li>
          <li><a href="">产业事业部</a></li>
          <li><a href="">关于我们</a></li>
          <li><a href="">联系我们</a></li>
        </ul>
        <div class="pe-button">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </div>
    <div class="page__carousel">
      <div class="swiper index_page_swiper">
        <div class="swiper-wrapper index_page_swiper_wrapper">
          <div class="swiper-slide">
            <img
              src="http://qiniu.picgo.srliforever.ltd/ddde08c7fc9e83767deda76f4e5a64f1_3138206301741634501.webp"
              alt=""
            />
            <div class="animate__box">
              <p>
                优质的服务 <br />
                提供全方位的互联网+产品及服务, <br />
                与客户共同成长, 共创价值
              </p>
              <a href="" class="lomore"> 了解更多 &gt;&gt; </a>
            </div>
          </div>
          <div class="swiper-slide">
            <img
              src="http://qiniu.picgo.srliforever.ltd/%E5%85%A8%E7%BD%91%E9%A6%96%E5%8F%91%E3%80%8A%E9%93%83%E8%8A%BD%E4%B9%8B%E6%97%85%E3%80%8B%E7%94%B5%E8%84%91%E9%AB%98%E6%B8%85%E5%A3%81%E7%BA%B8_%E5%BD%BC%E5%B2%B8%E5%A3%81%E7%BA%B8.jpg"
              alt=""
            />
            <div class="animate__box">
              <p>
                优质的服务 <br />
                提供全方位的互联网+产品及服务, <br />
                与客户共同成长, 共创价值
              </p>
              <a href="" class="lomore"> 了解更多 &gt;&gt; </a>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>

        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>

    <!-- 核心业务 -->
    <div class="page_item core_work">
      <div class="index_module_header">
        <a href="javscript:;">核心业务</a>
        <p>产教融合,教育服务</p>
      </div>
      <div class="core_wrapper container">
        <div class="row">
          <div class="col-12 col-md-4">
            <div class="bg-white p-2 shadow-sm rounded-2 item mb-3 mb-lg-0">
              <img
                src="/static/images/core1.png"
                class="mx-auto d-block my-5"
                alt=""
              />
              <p class="text-center fs-4">校区事业部</p>
              <p class="mx-auto text-ellipsis-4">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
                odio unde, eaque in provident, veniam dolorem nemo incidunt
                quidem ipsa saepe quasi expedita, mollitia laudantium fugit.
                Impedit nisi adipisci suscipit commodi dolorum ipsum consectetur
                rem vero, nihil atque laborum quaerat? Eius veniam ullam rerum,
                aperiam vitae accusantium at soluta quam!
              </p>
              <a
                href="javascript:;"
                class="more mx-auto my-4 d-block text-decoration-none px-3 py-2 rounded-5"
              >
                查看详情
              </a>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="bg-white p-2 shadow-sm rounded-2 item mb-3 mb-lg-0">
              <img
                src="/static/images/core2.png"
                class="mx-auto d-block my-5"
                alt=""
              />
              <p class="text-center fs-4">校区事业部</p>
              <p class="mx-auto text-ellipsis-4">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
                odio unde, eaque in provident, veniam dolorem nemo incidunt
                quidem ipsa saepe quasi expedita, mollitia laudantium fugit.
                Impedit nisi adipisci suscipit commodi dolorum ipsum consectetur
                rem vero, nihil atque laborum quaerat? Eius veniam ullam rerum,
                aperiam vitae accusantium at soluta quam!
              </p>
              <a
                href="javascript:;"
                class="more mx-auto my-4 d-block text-decoration-none px-3 py-2 rounded-5"
              >
                查看详情
              </a>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="bg-white p-2 shadow-sm rounded-2 item mb-3 mb-lg-0">
              <img
                src="/static/images/core3.png"
                class="mx-auto d-block my-5"
                alt=""
              />
              <p class="text-center fs-4">校区事业部</p>
              <p class="mx-auto text-ellipsis-4">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos
                odio unde, eaque in provident, veniam dolorem nemo incidunt
                quidem ipsa saepe quasi expedita, mollitia laudantium fugit.
                Impedit nisi adipisci suscipit commodi dolorum ipsum consectetur
                rem vero, nihil atque laborum quaerat? Eius veniam ullam rerum,
                aperiam vitae accusantium at soluta quam!
              </p>
              <a
                href="javascript:;"
                class="more mx-auto my-4 d-block text-decoration-none px-3 py-2 rounded-5"
              >
                查看详情
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 产业生态圈 -->
    <div class="page_item prod_circle">
      <div class="index_module_header">
        <a href="javscript:;">构建产业生态圈</a>
        <p>我们的热情,不仅对客户;我们的规范,不仅于制度</p>
      </div>
      <div class="core_wrapper container">
        <!-- 背景虚线容器 -->
        <div class="center-dash-center"></div>
        <!-- 四错位容器 -->
        <div class="wrapper_fitem row justify-content-between">
          <div class="col-12 col-sm-5 col-md-5 col-lg-2 mb-5 mb-lg-0">
            <div class="item h-100 p-3 p-sm-2">
              <img src="/static/images/prod1.png" alt="" class="img-fluid" />
              <p>产业基地</p>
            </div>
          </div>
          <div class="col-12 col-sm-5 col-md-5 col-lg-2 mb-5 mb-lg-0">
            <div class="item h-100 p-3 p-sm-2">
              <img src="/static/images/prod2.png" alt="" class="img-fluid" />
              <p>孵化中心</p>
            </div>
          </div>
          <div class="col-12 col-sm-5 col-md-5 col-lg-2 mb-5 mb-lg-0">
            <div class="item h-100 p-3 p-sm-2">
              <img src="/static/images/prod3.png" alt="" class="img-fluid" />
              <p>软件圈</p>
            </div>
          </div>
          <div class="col-12 col-sm-5 col-md-5 col-lg-2 mb-5 mb-lg-0">
            <div class="item h-100 p-3 p-sm-2">
              <img src="/static/images/prod4.png" alt="" class="img-fluid" />
              <p>设计圈子</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 培养方向 -->
    <div class="page_item prod_direct">
      <div class="index_module_header">
        <a href="javscript:;">培养方向</a>
        <p>打造企业需要的高质量,高技能人才</p>
      </div>
      <div class="core_wrapper container">
        <div class="row">
          <div class="mb-3 mb-md-2 col-12 col-md-6 col-lg-3">
            <div class="item bg-white p-3 rounded-2 shadow-sm">
              <img
                src="/static/images/dir1.png"
                class="img-fluid d-block mx-auto my-3"
                alt=""
              />
              <p class="text-center">Lorem ipsum dolor sit amet.</p>
              <p class="text-ellipsis-3">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex quo
                pariatur libero quasi dicta saepe assumenda quibusdam corporis
                molestiae ea, dignissimos, nisi nam, dolores rerum! Molestiae
                corporis totam ab cumque quas quasi iusto, cupiditate pariatur
                ipsa porro dicta fuga aperiam. Harum quod et quis facilis odit
                velit tenetur earum quaerat!
              </p>
            </div>
          </div>
          <div class="mb-3 mb-md-2 col-12 col-md-6 col-lg-3">
            <div class="item bg-white p-3 rounded-2 shadow-sm">
              <img
                src="/static/images/dir2.png"
                class="img-fluid d-block mx-auto my-3"
                alt=""
              />
              <p class="text-center">Lorem ipsum dolor sit amet.</p>
              <p class="text-ellipsis-3">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex quo
                pariatur libero quasi dicta saepe assumenda quibusdam corporis
                molestiae ea, dignissimos, nisi nam, dolores rerum! Molestiae
                corporis totam ab cumque quas quasi iusto, cupiditate pariatur
                ipsa porro dicta fuga aperiam. Harum quod et quis facilis odit
                velit tenetur earum quaerat!
              </p>
            </div>
          </div>
          <div class="mb-3 mb-md-2 col-12 col-md-6 col-lg-3">
            <div class="item bg-white p-3 rounded-2 shadow-sm">
              <img
                src="/static/images/dir3.png"
                class="img-fluid d-block mx-auto my-3"
                alt=""
              />
              <p class="text-center">Lorem ipsum dolor sit amet.</p>
              <p class="text-ellipsis-3">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex quo
                pariatur libero quasi dicta saepe assumenda quibusdam corporis
                molestiae ea, dignissimos, nisi nam, dolores rerum! Molestiae
                corporis totam ab cumque quas quasi iusto, cupiditate pariatur
                ipsa porro dicta fuga aperiam. Harum quod et quis facilis odit
                velit tenetur earum quaerat!
              </p>
            </div>
          </div>
          <div class="mb-3 mb-md-2 col-12 col-md-6 col-lg-3">
            <div class="item bg-white p-3 rounded-2 shadow-sm">
              <img
                src="/static/images/dir4.png"
                class="img-fluid d-block mx-auto my-3"
                alt=""
              />
              <p class="text-center">Lorem ipsum dolor sit amet.</p>
              <p class="text-ellipsis-3">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex quo
                pariatur libero quasi dicta saepe assumenda quibusdam corporis
                molestiae ea, dignissimos, nisi nam, dolores rerum! Molestiae
                corporis totam ab cumque quas quasi iusto, cupiditate pariatur
                ipsa porro dicta fuga aperiam. Harum quod et quis facilis odit
                velit tenetur earum quaerat!
              </p>
            </div>
          </div>
        </div>

        <a
          href=""
          class="lookmore text-decoration-none px-5 py-2 bg-white text-center d-flex align-items-center mx-auto mt-5 rounded-4"
        >
          查看更多
        </a>
      </div>
    </div>

    <!-- 数字记录 -->
    <div class="page_item num_his d-flex align-items-center">
      <div
        class="container-fluid d-flex align-items-center justify-content-center"
      >
        <div class="item">
          <span class="number_scorll">16</span>
          <span class="sup"> 年 </span>
          <div>校企合作</div>
        </div>
        <div class="item">
          <span class="number_scorll">26</span>
          <span class="sup"> 年 </span>
          <div>订单服务</div>
        </div>
        <div class="item">
          <span class="number_scorll">2249</span>
          <span class="sup"> 家 </span>
          <div>企业服务员</div>
        </div>
        <div class="item">
          <span class="number_scorll">5049</span>
          <span class="sup"> 名 </span>
          <div>培养人数</div>
        </div>
      </div>
    </div>

    <!-- 最新动态 -->
    <div class="page_item activity">
      <div class="index_module_header">
        <a href="javscript:;">最新动态</a>
        <p>纷至沓来,了解公司实时动态</p>
      </div>
      <div class="core_wrapper container">
        <div class="bg_popu">
          <div class="center_container">
            <div class="row row-cols-lg-4 gy-2">
              <div class="col-12 col-md-6 col-lg-3 mb-md-0 mb-2">
                <img
                  src="/static/images/activity1.png"
                  alt=""
                  class="w-100 h-100 img-fluid"
                />
              </div>
              <div class="col-12 col-md-6 col-lg-3 mb-md-0 mb-2">
                <img
                  src="/static/images/activity1.png"
                  alt=""
                  class="w-100 h-100 img-fluid"
                />
              </div>
              <div class="col-12 col-md-6 col-lg-3 mb-md-0 mb-2">
                <img
                  src="/static/images/activity1.png"
                  alt=""
                  class="w-100 h-100 img-fluid"
                />
              </div>
              <div class="col-12 col-md-6 col-lg-3 mb-md-0 mb-2">
                <img
                  src="/static/images/activity1.png"
                  alt=""
                  class="w-100 h-100 img-fluid"
                />
              </div>
            </div>
            <button class="more_btnm">查看更多</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 合作共赢 -->
    <div class="page_item coop">
      <div class="index_module_header">
        <a href="javscript:;">最新动态</a>
        <p>纷至沓来,了解公司实时动态</p>
      </div>
      <div class="core_wrapper container">
        <div class="row row-cols-lg-5 row-cols-md-2 row-cols-1">
          <div class="col">
            <div class="p-2 mb-2 rounded-3 overflow-hidden">
              <img src="/static/images/hez1.png" alt="" class="img-fluid" />
            </div>
          </div>
          <div class="col">
            <div class="p-2 mb-2 rounded-3 overflow-hidden">
              <img src="/static/images/hez1.png" alt="" class="img-fluid" />
            </div>
          </div>
          <div class="col">
            <div class="p-2 mb-2 rounded-3 overflow-hidden">
              <img src="/static/images/hez1.png" alt="" class="img-fluid" />
            </div>
          </div>
          <div class="col">
            <div class="p-2 mb-2 rounded-3 overflow-hidden">
              <img src="/static/images/hez1.png" alt="" class="img-fluid" />
            </div>
          </div>
          <div class="col">
            <div class="p-2 mb-2 rounded-3 overflow-hidden">
              <img src="/static/images/hez1.png" alt="" class="img-fluid" />
            </div>
          </div>
          <div class="col">
            <div class="p-2 mb-2 rounded-3 overflow-hidden">
              <img src="/static/images/hez1.png" alt="" class="img-fluid" />
            </div>
          </div>
          <div class="col">
            <div class="p-2 mb-2 rounded-3 overflow-hidden">
              <img src="/static/images/hez1.png" alt="" class="img-fluid" />
            </div>
          </div>
          <div class="col">
            <div class="p-2 mb-2 rounded-3 overflow-hidden">
              <img src="/static/images/hez1.png" alt="" class="img-fluid" />
            </div>
          </div>
          <div class="col">
            <div class="p-2 mb-2 rounded-3 overflow-hidden">
              <img src="/static/images/hez1.png" alt="" class="img-fluid" />
            </div>
          </div>
          <div class="col">
            <div class="p-2 mb-2 rounded-3 overflow-hidden">
              <img src="/static/images/hez1.png" alt="" class="img-fluid" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="/utils/utils.js"></script>
    <script src="/node_modules/swiper/swiper-bundle.min.js"></script>
    <script src="/static/javas/main.js"></script>
    <script>
      var swiper = new Swiper(".index_page_swiper", {
        loop: true,
        autoplay: {
          delay: 17000,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".index_page_swiper .swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".index_page_swiper .swiper-button-next",
          prevEl: ".index_page_swiper .swiper-button-prev",
        },
        on: {
          init() {
            utils.ready(() => {
              // 初始化第一屏幕轮播的动画效果
              this.slides[0]
                .querySelector(".animate__box")
                .classList.add("animate__fadein_up");
            });
          },
          slideChangeTransitionStart() {
            // 在开始过渡动画之前, 将所有的动画效果隐藏或删除
            utils.ready(() => {
              this.slides.forEach((slide) => {
                slide.querySelector(".animate__box").classList.add("none");
              });
            });
          },
          slideChangeTransitionEnd() {
            // 在过渡动画结束之后, 将当前的动画效果显示出来
            utils.ready(() => {
              // this.slides
              this.slides.forEach((slide) => {
                slide
                  .querySelector(".animate__box")
                  .classList.remove("animate__fadein_up", "none");
              });
              this.slides[this.activeIndex]
                .querySelector(".animate__box")
                .classList.add("animate__fadein_up");
            });
          },
        },
      });

      document.querySelectorAll(".number_scorll").forEach((element) => {
        const dataFinish = element.getAttribute("data-finish");
        utils.ready(() => {
          utils.isInViewPortOfOne(element, () => {
            const scroller = new utils.NumberScroll({ el: element });
            scroller.start();
          });
        });
      });
    </script>
  </body>
</html>
